<template>
  <div class="page page-social-detail has-headbar">
    <head-bar :title="$route.meta.title" :prevRoute="{name: 'social-list'}" />
    <section class="content-box">
      <list-item :item-data="item"></list-item>
      <section class="title-box">
         <div class="section-title">
          热门评论
        </div>
        <van-icon class="arrow" name="arrow" />
      </section>
      <section class="comment-box" :key="index" v-for="(cell , index) in comments">
        <div class="comment-head">
          <div class="left">
             <div class="avatar"><img :src="cell.headImageUrl || require('@/assets/images/avatar.png')" alt=""></div>
              <div class="info">
                <div class="name">{{cell.nickName}}</div>
                <div class="time">{{formTime(cell.topicsComments.createTime)}}</div>
              </div>
          </div>
          <div class="right">
            <div class="like" @click="likeEvent(cell.topicsComments.commentID,index)">
              <span  class="icon icon-like" :class="{active: cell.isLike}"></span> <span class="info-content">{{cell.topicsComments.likeNumber}}</span>
            </div>
          </div>
        </div>
        <div class="comment-content">
          {{cell.topicsComments.content}}
        </div>
        <!--<div class="recomments">-->
          <!--<div class="re">孙大勇回复潇洒得冯二哥</div>-->
          <!--<div class="content">现场战况激烈没来看真是可惜了哈</div>-->
          <!--<div class="re">潇洒得冯二哥回复孙大勇</div>-->
          <!--<div class="content">哈哈哈，下次有比赛一定看</div>-->
        <!--</div>-->
      </section>
    </section>
    <section class="comment-form">
      <!--<div class="icon icon-smile"></div>-->
      <input class="comment-input" v-model="content" v-on:keyup.enter="addComments" @submit="addComments" placeholder="评价一下吧">
      <div class="comment-btn" @click="addComments">发送</div>
    </section>
  </div>
</template>

<script>
import ListItem from './components/ListItem'
import { API_GET_TOPICS_DETAILS, API_GET_TOPIC_COMMENTS, API_ADD_THUMBS_UP, API_ADD_COMMENTS } from '@/service/social'
import { timestampFormat } from '@/libs/utils'
import { certificateMixin } from '@/components/mixins'
export default {
  mixins: [ certificateMixin ],
  components: { ListItem },
  data () {
    return {
      item: {
        id: 1,
        name: '',
        avatar: '',
        time: '',
        content: '',
        position: '',
        createTime: 0,
        topics: {
          commentNumber: 0,
          likeNumber: 0,
          attachmentsList: []
        }
      },
      comments: [],
      content: ''
    }
  },
  created () {
    this.getDetail()
  },

  methods: {
    likeEvent (contentID, index) {
      this.certificateCheck().then(() => {
        let reqData = {
          userId: this.$store.getters.getUserInfo.userId,
          contentId: contentID,
          type: 2
        }
        API_ADD_THUMBS_UP(reqData).then(resData => {
          this.comments[index].isLike = true
          this.comments[index].topicsComments.likeNumber++
        })
      })
    },
    // 添加评论
    addComments () {
      this.certificateCheck().then(() => {
        let reqData = {
          userId: this.$store.getters.getUserInfo.userId,
          parentCommentID: 0,
          topicID: this.item.topics.topicID,
          content: this.content,
          locationLat: 30,
          locationLong: 120
        }
        API_ADD_COMMENTS(reqData).then(resData => {
          this.content = ''
          this.$toast('评论成功')
          this.requestComments()
        })
      })
    },
    getDetail () {
      API_GET_TOPICS_DETAILS(this.$route.params.id).then(resData => {
        resData.topicDetail.from = 'detail'
        this.item = resData.topicDetail
      })
      this.requestComments()
    },
    requestComments () {
      let reqData = {
        topicID: this.$route.params.id,
        time: 0,
        pageNumber: 1,
        pageSize: 20
      }
      API_GET_TOPIC_COMMENTS(reqData).then(resData => {
        // console.log(resData)
        this.comments = resData.commentsPage.resultList
      })
    },
    formTime (time) {
      return timestampFormat(time)
    }
  }
}
</script>

<style lang="less">
.page-social-detail {
  @bottomHeight: 70px;
  padding-bottom: @bottomHeight;
  @imagePath: '../../assets/images/social';
  .icon {
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    vertical-align: top;
    &-comment {
      width: 40/2px;
      height: 40/2px;
      background-image: url("@{imagePath}/icon_comment.png");
    }
    &-like {
      width: 40/2px;
      height: 40/2px;
      background-image: url("@{imagePath}/icon_like.png");
    }
    &-like.active{
      width: 40/2px;
      height: 40/2px;
      background-image: url("@{imagePath}/icon_like_active.png");
    }
    &-smile {
      width: 22px;
      height: 22px;
      background-image: url("@{imagePath}/icon_smile.png");
    }
  }
  .info-content {
    line-height: 20px;
    display: inline-block;
  }
  .content-box{
    padding: 0 15px;
  }
  .title-box{
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
    .section-title {
      margin-left: 0;
    }
    .arrow{
      transform: rotate(90deg);
    }
  }
  .comment-box{
    margin-top: 20px;
    margin-bottom: 20px;
    .comment-head{
      display: flex;
      justify-content: space-between;
      align-items: center;

      .left {
        display: flex;
        align-items: center;
        .avatar {
          width: 54/2px;
          height: 54/2px;
          border-radius: 50%;
          overflow:  hidden;
          margin-right: 21/2px;
          img {
            display: block;
            width: 100%;
            height: 100%;
          }
        }
        .info {
          flex: 1;
          height: 54/2px;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
        }
        .name {
          font-size: 12px;
          font-weight: bold;
        }
        .time {
          font-size: 12px;
          color: #3B3B3B;
        }
      }
    }
    .comment-content{
      font-size: 14px;
      font-weight: medium;
      line-height: 23px;
      margin: 10px 0 13px;
      padding-left: (21+54)/2px;
    }
    .recomments{
      margin-left: (21+54)/2px;
      background: #f2f2f2;
      padding: 18px;
      .re {
        font-size: 12px;
        color: #868686;
        padding: 10px 0;
      }
      .content{
        font-size: 13px;
      }
    }
  }
  .comment-form {
    display: flex;
    align-items: center;
    position: fixed;
    bottom: 0;
    height: @bottomHeight;
    width: 100%;
    border-top: 1px solid #E1E1E1;
    background-color: #fff;
    padding: 0 15px;
    box-sizing: border-box;
    .comment-input{
      border: 1px solid #F1F1F1;
      border-radius: 55px;
      flex: 1;
      padding: 5px 15px;
      height: 30px;
      font-size: 14px;
    }

    .comment-btn{
      color:#fff;
      border-radius: 20px;
      font-size: 14px;
      width: 70px;
      line-height: 40px;
      text-align: center;
      margin-left: 20px;
      background: -webkit-linear-gradient(left top,rgb(246,195,116), rgb(254,165,75));
    }

  }
}
</style>
